<template>
  <!-- 新增权限弹框 -->
  <el-dialog title="新增权限" :visible="permiAddDialogVisible" @close="onClose">
    <el-form :model="permiAddForm">
      <el-form-item label="权限名称" :label-width="permiAddFormLabelWidth">
        <el-input v-model="permiAddForm.permissionName"></el-input>
      </el-form-item>
      <el-form-item label="权限编码" :label-width="permiAddFormLabelWidth">
        <el-input v-model="permiAddForm.permissionCode"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="permiAddFormLabelWidth">
        <el-input v-model="permiAddForm.descr"></el-input>
      </el-form-item>
      <el-form-item label="父级菜单" :label-width="permiAddFormLabelWidth">
        <!-- <el-input v-model="permiAddForm.parentId"></el-input> -->

        <el-tree
          :data="menuData"
          default-expand-all
          node-key="key"
          ref="tree1"
          highlight-current
          :props="defaultProps"
          show-checkbox
          check-strictly=true
        ></el-tree>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="handleSubmit">确认</el-button>
      <el-button type="danger" size="mini" @click="onCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMenuOnlyTree } from "@/api/menu";
import { addPermi } from "@/api/permi";

export default {
  permissionName: "PermiAdd",
  props: ["permiAddDialogVisible"],
  data() {
    return {
      //   listLoading: true,
      permiAddForm: {
        permissionName: "",
        permissionCode: "",
        parentId: "",
        descr: "",
      },
      permiAddFormLabelWidth: "100px",
      //   roles: [],
      //   roleOptions: [],
      menuData: null,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    reset() {
      this.permiAddForm.permissionName = "";
      this.permiAddForm.permissionCode = "";
      this.permiAddForm.descr = "";
    },
    handleSubmit() {
      var nodes = this.$refs.tree1.getCheckedNodes();
      if (nodes.length > 1) {
        this.$message.error("父级菜单只能单选");
      } else if (nodes.length < 1) {
        this.$message.error("请选择父级菜单");
      } else {
        var menuId = nodes[0].id;

        var params = {
          menuId: menuId,
          permissionName: this.permiAddForm.permissionName,
          permissionCode: this.permiAddForm.permissionCode,
          descr: this.permiAddForm.descr,
        };

        addPermi(params).then((response) => {
          if (response.data == 1) {
            this.reset();
            this.$emit("success");
          } else {
            this.reset();
            this.$emit("failed", response.data.msg);
          }
        });
      }
    },
    onCancel() {
      this.$emit("cancel");
    },
    onClose() {
      this.$emit("close");
    },
  },
  watch: {
    permiAddDialogVisible() {
      if (this.permiAddDialogVisible) {
        getMenuOnlyTree().then((response) => {
          this.menuData = response.data;
        });
      }
    },
  },
};
</script>
